// Copyright (c) [2021] [daifang]
// [Dcomponent] is licensed under Mulan PSL v2.
// You can use this software according to the terms and conditions of the Mulan PSL v2.
// You may obtain a copy of Mulan PSL v2 at:
//          http://license.coscl.org.cn/MulanPSL2
// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
// EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
// MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
// See the Mulan PSL v2 for more details.
import { bool, number, string } from "prop-types"
import './index.less'
import {useEffect, useState} from 'react'
// 加载动画
function Loading(props){
    let {children, visible, tips, type, color,opactiy} = props
    const [visibleInner, setVisibleInner] = useState(visible)
    const [animate, setAnimate] = useState('fadeIn')
    useEffect(() => {
        let timer
        if(visible){
            setVisibleInner(true)
        }else{
            setAnimate('fadeOut')
            timer = setTimeout(() => {
                setVisibleInner(false)
            }, 400);
        }
        return () => {
            setAnimate('fadeIn')
            clearTimeout(timer)
        }
    }, [visible])
    return <>
            {children}
            {
                visibleInner ? 
                <div className={`default animated faster ${animate}`} style={{backgroundColor:`rgba(65, 65, 65, ${opactiy})`}}>
                    <div className='loading-box'> 
                        <div className="load">
                            <i className={`iconfont icon-loading-${type}`} style={{color:color}}></i>
                        </div>
                    </div>
                    {tips?tips:'马上赶到'}
                </div>
                : null
            }
    </>
}
Loading.propTypes = {
    // type:number,
    tips:string,
    visible:bool,
    color:string,
    opactiy:number
}
Loading.defaultProps={
    type:'1',
    visible:false,
    opactiy:0.6
}
export default Loading